import { UploadOutlined } from "@ant-design/icons";
import { Button, Card, Form, Input, Upload, Select, message } from "antd";
import { useState } from "react";
import { POST_SCRIPT } from "../../api/scripts";
import WEditor from "../../components/Editor";

function ScriptCreate() {
  let submit = async (values) => {
    // console.log(values);
    // values.type = values.type.join("、")
    // values.url = "http://172.16.3.100:4000" + url

    values.html = values.content.html
    values.content = values.content.text
    console.log(values);
    let res = await POST_SCRIPT(values)
    if (!res.code) {
      message.success("数据添加成功！")
    }
    console.log(res);
  }


  let [url, setUrl] = useState(null);

  // 上传图片事件
  let uploadImg = (info) => {
    // 上传成功
    if (info.file.status === "done") {
      setUrl(info.file.response.data)
      console.log(info);
    }
  }

  return (
    <Card>
      <Form onFinish={submit}>
        {/* 在Form.Item  valuePropName定义内部属性，通过getValueFormEvent处理from表单提交时所需数据格式，通过getValueProps设置页面渲染时数据展示格式和效果 */}
        <Form.Item label="图片" name="url" valuePropName="file" getValueFromEvent={(e) => {
          if (e.file.status === "done") {
            console.log(e.file.response);
            return "http://172.16.3.100:4000" + e.file.response.data
            // return e.file.response.data
          }
        }} >
          <Upload name="file" action="http://172.16.3.100:4000/api/upload">
            <Button icon={<UploadOutlined />}>上传图片</Button>
          </Upload>
        </Form.Item>
        <Form.Item name="title" label="标题">
          <Input placeholder="请输入标题!"></Input>
        </Form.Item>
        <Form.Item name="content" label="内容">
          <WEditor></WEditor>
        </Form.Item>
        <Form.Item name="duration" label="时长">
          <Input placeholder="请输入时长"></Input>
        </Form.Item>

        <Form.Item label="类型" name="type" valuePropName="value" getValueFromEvent={(e) => {
          // 表单提交转换为字符串
          // console.log(e);
          return Array.isArray(e) && e.join("、")
        }}
          getValueProps={(e) => {
            // 表单渲染时展示样式效果
            return e && e.split("、")
          }}>
          <Select
            mode="multiple"
            allowClear
            options={[
              {
                label: "城限",
                value: "城限"
              },
              {
                value: "情感",
                label: "情感"
              },
              {
                value: "现代",
                label: "现代"
              },
              {
                value: "立意",
                label: "立意"
              },
              {
                value: "本格",
                label: "本格"
              },
              {
                value: "惊悚",
                label: "惊悚"
              },
            ]}
          />
        </Form.Item>
        <Form.Item name="price" label="价格">
          <Input placeholder="请输入单人价格"></Input>
        </Form.Item>
        <Form.Item name="max" label="最大人数">
          <Input placeholder="请输入最大人数"></Input>
        </Form.Item>
        <Form.Item name="composition" label="男女配比">
          <Input placeholder="请输入男女配比人数"></Input>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">添加</Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default ScriptCreate;